/* 规定全局颜色，可以使用var调用 */
:root {
    --bg-body: #dff9f6;
    --bg-nav: #220455;
    --color-nav: #644c89;
    --color-nav-active: #fff;
}

/* 初始化 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    /* 网格布局 */
    display: grid;
    /* 垂直居中 */
    place-items: center;
    /* 字体 */
    font-family: cursive;
    background-color: var(--bg-body);
}

#filter-svg {
    /* 设置元素不可见 */
    display: none;
}

.nav {
    position: relative;
    /* 设置列表格式 */
    list-style-type: none;
    /* 弹性布局 */
    display: flex;
    background-color: var(--bg-nav);
    height: 80px;
    border-radius: 20px;
    /* 定义滤镜 */
    filter: url("#goo");
}

.nav li a {
    /* 去除下划线 */
    text-decoration: none;
    color: var(--color-nav);
    width: 120px;
    height: 100%;
    /* 转为行内元素 */
    display: inline-grid;
    /* 垂直居中 */
    place-items: center;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    position: relative;
}

.nav li a .title {
    display: none;
}

.nav li a:hover {
    color: var(--color-nav-active);
}

.nav li a.nav-item-active {
    color: var(--color-nav-active);
    /* 平移20%  上下移动*/
    transform: translateY(-20%);
    font-size: 45px;
    /* 放慢速度，使用贝塞尔曲线 */
    transition: transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav li a.nav-item-active .title {
    display: block;
    font-size: 16px;
}

.nav .nav-indicator {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: var(--bg-nav);
    /* 绝对定位 */
    position: absolute;
    top: -35px;
    left: calc(300px - 45px);
    z-index: 1;
    /* 贝塞尔曲线 */
    transition: left .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes zoom {
    0% {
        width: 0;
        height: 0;
        opacity: 0.2;
    }

    100% {
        width: 1500px;
        height: 1500px;
        opacity: 0;
    }
}